<template>
  <div class="water-flow-wrap">
    <div class="title flex-between">
      <div class="title-l">
        <span>曲线趋势图</span>
      </div>
    </div>
    <div class="filter flex-row">
      <div class="date-picker flex-row">
        <el-date-picker
          v-model="startTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yy-MM-dd HH:mm"
          :editable="false"
          :clearable="false"
          popper-class="data-picker-panel-popper-blue"
          type="datetime"
          placeholder="选择日期时间"
          @change="startTimeChange"
        />
        <span>——</span>
        <el-date-picker
          v-model="endTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yy-MM-dd HH:mm"
          :editable="false"
          :clearable="false"
          popper-class="data-picker-panel-popper-blue"
          type="datetime"
          placeholder="选择日期时间"
          @change="endTimeChange"
        />
      </div>
      <img
        class="filter-btn"
        src="@/assets/img/search.png"
        alt=""
        srcset=""
        @click="handleGetDate"
      />
    </div>
    <div class="echarts flex-between">
      <!-- 涌水量 -->
      <div class="echartsItem">
        <WaterLevelEcharts
          ref="WaterLevel"
          :mp-id="mpId"
          :start-time="startTime"
          :end-time="endTime"
          style="width: 100%; height: 100%"
        />
      </div>

      <!-- <div class="echartsItem">
        <WaterTemperatureEcharts ref="WaterTemperature" style="width: 100%; height: 100%" />
      </div> -->
      <!-- 水压 -->
      <!-- <div class="echartsItem">
        <WaterPressureEcharts ref="WaterPressure" style="width: 100%; height: 100%" />
      </div> -->
    </div>
  </div>
</template>

<script>
import MixinTime from '@/views/components/MixinTime'
import WaterLevelEcharts from './waterLevelEcharts'
// import WaterTemperatureEcharts from './waterTemperatureEcharts'
// import WaterPressureEcharts from './waterPressureEcharts'
export default {
  name: 'DrainageAnalysis',
  components: {
    WaterLevelEcharts
    // WaterTemperatureEcharts,
    // WaterPressureEcharts
  },
  mixins: [MixinTime],
  props: {
    mpId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {

    }
  },
  computed: {},

  methods: {
    handleGetDate () {
      this.$refs.WaterLevel.getData()
      // this.$refs.WaterTemperature.getData()
      // this.$refs.WaterPressure.getData()
    }
  }
}
</script>

<style lang='scss' scoped>
.echarts {
  height: calc(100% - 100px);
  .echartsItem {
    width: 30%;
    height: 100%;
  }
}
.title {
  height: 40px;
}
.filter {
  span {
    margin: 0 10px;
  }
}

.filter-btn {
  width: 80px;
  height: 26px;
  margin-left: 100px;
}
.water-flow-wrap {
  width: 100%;
  height: 100%;
  color: #d6d6d6;
  padding: 0 20px;
}
</style>
